<template>
  <div class="goods-info">
    <!-- 商品展示图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div style="text-align: center">
            <img v-bind:src="goodsinfo.img" />
          </div>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsinfo.name }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="go-num">
            编号：<span>{{ goodsinfo.id }}</span>
          </p>
          <p class="price">
            定价：<span>￥{{ goodsinfo.price }}</span>
          </p>
          <div v-if="goodsinfo.num">
            <p>库存情况:{{ goodsinfo.num }}</p>
            <p class="go-num">
              购买数量
              <numbox
                :max="goodsinfo.num"
                initcount="1"
                :goodsid="goodsinfo.id"
                size="min"
              ></numbox>
            </p>
            <p class="go-buy">
              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small">加入购物车</mt-button>
            </p>
          </div>
          <div v-else>暂无库存</div>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品型号：ABAKDKKS</p>
          <p>商品规格：TFF</p>
          <p>商品颜色：土豪金</p>
        </div>
      </div>
      <div class="mui-card-header">商品详情</div>
      <div class="goods-desc">
        <div class="content">这是一个好商品</div>
      </div>
    </div>
  </div>
</template>
<script>
import  numbox  from '../components/numbox.vue'
export default {
    data() {
        return {
            goodsinfo:{},
        }
    },
    props:['gInfo'],
    created() {
        this.getGoodsInfo()
    },
    methods: {
        getGoodsInfo(){
            this.goodsinfo=this.$router.params.gInfo
        }
    },
    components:{
        numbox
    }
}
</script>
<style lang="scss" scoped>
    
</style>